<!DOCTYPE html>
<html class="ui-page-login">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<style>
			body{background:#fff;}
			.mui-bar-nav{
				width:90%;
				margin: 0 auto;
				box-shadow:none;
			}
			.mui-header{
				width:100%;
				height:200px;
				text-align: center;
				
			}.mui-header img{
				margin:48px 0 0;
				max-height:100%;
			}
			.mui-input-row label{
				padding:11px 0;
				text-align: center;
				width:15%;
			}
			.mui-input-row{
				background:#d9dba4!important;
				margin-bottom:5px;
			}
			.mui-input-row input[placeholder]{
				color:#9fa41c;
			}
			::-webkit-input-placeholder { /* WebKit browsers */ 
			color: #9fa41c;
			} 
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
			color: #9fa41c; 
			} 
			::-moz-placeholder { /* Mozilla Firefox 19+ */ 
			color: #9fa41c; 
			} 
			:-ms-input-placeholder { /* Internet Explorer 10+ */ 
			color: #9fa41c; 
			}
			.mui-input-row i{
				color:#9fa41c;
				font-size: 20px;
			}
			.mui-btn-block{
				background: #9fa41c;
				border-color:#9fa41c;
				padding:5px;
				width: 100%;
				border-radius:0px;
			}
			.mui-content-padded{
				margin: 10px 0 0;
			}
			.mui-input-row input{
				width:85%!important;
				padding:15px 0px 6px 0;
				color:#000!important;
			}
			.mui-btn-primary:enabled:active{
				background: #d9dba4;
				border-color: #d9dba4;
			}
			.mui-content{
				background: #fff;
			}
			#reg{
				float: right;
			}
			#forgetPassword{
				float: left;
			}
			.link-area a{
				color:#9fa41c;
			}
			.mui-input-group .mui-input-row:after{
				content:none;
			}
			.mui-iconfont{
				font-size: 24px!important; 
			}
			#verify_code{
				width:120px!important;
				float: left;
			}
			#mui_verify_code{
				position:absolute;
				top:12px;
				right: 10px;
				border:none;
				padding: 0;
				background: none;
				color:#f39700;
			}
			.mui-verify{
				position:relative;
			}
			.mui-action-back, .mui-icon-more-filled {
			    color: #ACACB4;
			}
		</style>

	</head>

	<body>
		<div class="mui-bar mui-bar-nav" style="width: 100%;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</div>
		<div class="mui-bar-nav">
		    
			<div class="mui-header">
				<img src="../images/login.png" width="65%" />
			</div>
			<div class="mui-content">
				<form id='login-form' class="mui-input-group">
					<div class="mui-input-row">
						<label><i class="iconfont icon-gerentouxiang mui-iconfont"></i></label>
						<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
					</div>
					<div class="mui-input-row mui-verify">
						<label><i class="iconfont icon-yanzhengma" style="font-size:22px;"></i></label>
						<input id='verify_code' type="number" class="mui-input" placeholder="验证码">
						<span id="mui_verify_code">发送验证码</span>
					</div>
					<div class="mui-input-row">
						<label><i class="iconfont icon-unie614"></i></label>
						<input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码">
					</div>
				</form>
				<div class="mui-content-padded">
					<button id='login' class="mui-btn mui-btn-block mui-btn-primary mui-submit">注册</button>
					<!--<div class="link-area"><a id='return_login'>返回登录</a></div>-->
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/castapp.js"></script>
		<script src="../js/myapp.js"></script>
	</body>
</html>
<script>
	ca.init();
	var mui_submit = ca.className('mui-submit');
	var mui_verify_code = ca.id('mui_verify_code');
	var flag = true;
	var code = '';
	var temp_mobile = '';
	//手机正则
    var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
	//发送手机验证码  
	mui_verify_code.addEventListener('tap',function(){
		var access_token = localStorage.getItem('access_token');
		var mobile = ca.id('account').value;
		if(!isMobile.test(mobile)){
			ca.prompt('手机号格式不正确');return;
		}
		if(!flag){
			return;
		}
		flag = false;
		code = castapp.getIdCode();
		console.log(code);
		temp_mobile = ca.id('account').value;
		var url = request_url+'/api/public/send_code?access_token='+access_token;
		localStorage.setItem('send_code',code);
		ca.post({
			url:url,
			data:{verify_code:code,mobile:mobile},
			succFn:function(res){
				var json = JSON.parse(res);
				//console.log(res);
				flag = true;
				ca.prompt(json.msg);
				if(json.status == 1){
					var num = 60;
					var time = setInterval(function(){
						mui_verify_code.style.color = '#bbb';
						num--;
						mui_verify_code.innerText = '重新获取('+num+'s)';
						if(num == 0){
							num = 10;
							mui_verify_code.innerText = '发送验证码';
							mui_verify_code.style.color = '#f39700';
							clearInterval(time);
						}
					},1000)
				}
			}
		});
		
		
	});
	//点击注册
	mui_submit[0].addEventListener('tap',function(){
		var access_token = localStorage.getItem('access_token');
		var mobile = ca.id('account').value;
		var password = ca.id('password').value;
		var verify_code = ca.id('verify_code').value;
        var pwd = /^[a-z0-9A-Z_]{6,16}$/;
        //请求接口 
		var url = request_url + '/api/user/register?access_token='+access_token;
		if(!isMobile.test(mobile)){
			ca.prompt('手机号格式不正确');return;
		}
		if(!pwd.test(password)){
			ca.prompt('密码格式不正确');return;
		}
		if(code != verify_code){
			ca.prompt('验证码错误');return;
		}
		if(temp_mobile != mobile){
			ca.prompt('请重新获取验证码');return;
		}
		ca.post({
			url:url,
			data:{
				mobile:mobile,
				password:password
			},
			succFn:function(res){
				var json = JSON.parse(res);
				ca.prompt(json.msg);
				console.log(res);
				//console.log(url);
				if(json.status == 1){
					code = '';
					setTimeout(function(){
						//关闭当前页
						ca.closeCurrentInterface();
					},1000);
				}
			}
		});
	});
	//返回登录
	ca.id('return_login').addEventListener('tap',function(){
		ca.newInterface({url:'login.html',id:'login'});
	});
</script>